<template>
  <div class="man_note">
    <div class="title">
      <div>管理笔记</div>
    </div>

    <!-- 核心内容区 -->
    <br>

    <el-table :data="all_notes.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
      style="width: 100%; max-height: 700px; overflow: scroll;" @selection-change="handleSelectionChange"
      class="table_scrollbar">

      <!-- 多选功能 -->
      <el-table-column type="selection" width="55">
      </el-table-column>

      <!-- 基本内容 -->
      <!-- auther_name -->
      <el-table-column prop="auther_name" label="作者" width="120">
      </el-table-column>

      <!-- title -->
      <el-table-column prop="title" label="标题" width="150">
        <template v-slot="scope">
          {{ scope.row.title.slice(0, 10) }}·····
        </template>
      </el-table-column>

      <!-- cover_img -->
      <el-table-column prop="cover_img" label="笔记封面" width="170">
        <template v-slot="scope">
          <img :src="scope.row.cover_img" alt="" style="width:80px;height: 80px; border-radius: 8px;">
        </template>
      </el-table-column>

      <!-- create_time -->
      <el-table-column prop="create_time" label="创建时间" width="170">
        <template v-slot="scope">
          {{ scope.row.create_time | dateFormat }}
        </template>
      </el-table-column>

      <!-- tag -->
      <el-table-column prop="tag" label="标签" width="100">
        <template v-slot="scope">
          <el-tag>{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>

      <!-- 功能键-操作区 -->
      <el-table-column prop="address" label="操作">
        <template v-slot="scope">
          <el-button type="warning" plain @click="delete_ById(scope.row.note_id)">删除</el-button>
          <el-button type="primary" plain @click="prepare_alter(scope.row.note_id)">修改</el-button>
        </template>
      </el-table-column>

    </el-table>
    <br>

    <!-- 分页 -->
    <div style="background-color:white; width: 100%; position: fixed; top: 75%">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="all_notes.length">
        </el-pagination>
      </div>
    </div>

    <!-- 抽屉--修改个人资料 -->
    <el-drawer title="一个小抽屉" :visible.sync="drawer" :with-header="true" append-to-body>

      <h1 style="text-align: center">修改笔记信息</h1>

      <div style="padding: 20px; margin-top: 60px;">

        <!-- 隐藏 note_id -->

        <!-- title -->
        <div style="margin-bottom: 10px;">
          <el-input placeholder="请输入内容" v-model="pre_data.title">
            <template slot="prepend">标题</template>
          </el-input>
        </div>

        <!-- cover_img -->
        <div style="text-align: center;">
          <el-upload class="avatar-uploader" action="" :http-request="upload" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="pre_data.cover_img" :src="pre_data.cover_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <!-- file_address -->
        <div style="text-align: center;">
          <el-upload class="upload-demo" drag action="" :file-list="videoFile" :http-request="upload_VideoNode_videurl"
            :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将笔记文件拖到此处，或<em>点击上传</em></div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </div>

        <!-- tag -->
        <div style="margin-bottom: 10px;">
          <!--  前端 折腾 Java MySQL NodeJS Python -->
          <el-radio v-model="pre_data.tag" label="前端" border>前端 </el-radio>
          <el-radio v-model="pre_data.tag" label="折腾" border>折腾 </el-radio>
          <el-radio v-model="pre_data.tag" label="Java" border>Java </el-radio>
          <el-radio v-model="pre_data.tag" label="MySQL" border>MySQL </el-radio>
          <el-radio v-model="pre_data.tag" label="NodeJS" border>NodeJS </el-radio>
          <el-radio v-model="pre_data.tag" label="Python" border>Python </el-radio>
        </div>

        <el-button type="primary" plain @click="send_alter">提交修改</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
export default {
  data() {
    return {
      //  视频文件的数据
      videoFile: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ],
      // 所有笔记数据
      all_notes: [
        {
          "note_id": 1,
          "auther_id": 1,
          "auther_name": "admin",
          "auther_avatar": "http://localhost:3000/data/_r.jpg",
          "title": "测试笔记",
          "cover_img": "http://localhost:3000/data/fengmian.webp",
          "file_address": "http://localhost:3000/data/1687855270712-demoNote.md",
          "create_time": "2023-06-27T04:03:43.000Z",
          "tag": "前端",
          "likes_number": 666,
          "starts_number": 999
        }
      ],
      // 当前页码
      currentPage: 1,
      // 当前选择的每页多少条数据，来自:page-size里面数组选择项变化，触发的handleSizeChange()
      pageSize: 4,
      // 多选
      multipleSelection: [],
      // 控制 修改评论对话框 的展示
      centerDialogVisible: false,
      // 抽屉控制
      drawer: false,

      // 预备修改的单条笔记数据
      pre_data: {
        "note_id": 1,
        "auther_id": 1,
        "auther_name": "admin",
        "auther_avatar": "http://localhost:3000/data/_r.jpg",
        "title": "测试笔记",
        "cover_img": "http://localhost:3000/data/fengmian.webp",
        "file_address": "http://localhost:3000/data/1687855270712-demoNote.md",
        "create_time": "2023-06-27T04:03:43.000Z",
        "tag": "前端",
        "likes_number": 666,
        "starts_number": 999
      }
    }
  },
  mounted() {
    this.getAllnotes();
  },
  methods: {
    // 上传头像  http://localhost:3000/atom/imgUpload -----------------------------------
    upload(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/imgUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("图片上传成功")
        this.pre_data.cover_img = res.data.imgfile_url
      }).catch(response => {
        console.log(response)
      })
    },
    handleAvatarSuccess(res, file) {
      this.pre_data.cover_img = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    // 上传视频  http://localhost:3000/atom/noteUpload -------------------------------------
    upload_VideoNode_videurl(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/noteUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("markdown笔记文件上传成功")
        this.videoFile.push({ name: param.file.name, url: res.data.mdfile_url })
        console.log(res.data.mdfile_url)
        this.pre_data.file_address = res.data.mdfile_url
      }).catch(response => {
        console.log(response)
      })
    },
    // ------------------------------------------
    // 修改笔记内容前的预备操作
    prepare_alter(note_id) {
      for (var i = 0; i < this.all_notes.length; i++) {
        var item = this.all_notes[i];
        if (item.note_id == note_id) {
          this.pre_data = this.all_notes[i]

          this.drawer = true
        }
      }
    },

    // 提交笔记修改 http://localhost:3000/note_admin/alterNoteByID
    send_alter() {
      this.$http({
        url: '/note_admin/alterNoteByID',
        params: {
          note_id: this.pre_data.note_id,
          auther_id: this.pre_data.auther_id,
          auther_name: this.pre_data.auther_name,
          auther_avatar: this.pre_data.auther_avatar,
          title: this.pre_data.title,
          cover_img: this.pre_data.cover_img,
          file_address: this.pre_data.file_address,
          tag: this.pre_data.tag
        },
        method: 'post'
      }).then(res => {
        this.$message.success("修改笔记信息成功")
        this.getAllnotes()
        this.drawer = false
      }).catch(res => {
        console.log(res);
      })
    },

    // --------------------------------------------

    // 获取所有笔记数据
    getAllnotes() {
      this.$http({
        url: '/note/getAllNotes',
        method: 'post'
      }).then(res => {
        // 存储所有笔记
        this.all_notes = res.data.data
      }).catch(res => {
        console.log(res);
      })
    },

    // 删除笔记 http://localhost:3000/note_admin/deleteNoteByID
    delete_ById(id) {
      this.$http({
        url: '/note_admin/deleteNoteByID',
        params: {
          note_id: id
        },
        method: 'post'
      }).then(res => {
        // 删除成功判断
        if (res.data.data.affectedRows == 1) {
          this.$message.success('已删除笔记')
          this.getAllnotes()
        } else {
          return this.$message.error('删除失败，请重试')
        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 修改每页多少条数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },

    // 当前页编号
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    // 多选功能
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
  }
}
</script>

<style lang="less" scoped>
.man_note {
  width: 98%;
  height: 98%;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 10px;
  padding-left: 20px;
  // padding-bottom: 240px;
  overflow: scroll;
}

.man_note::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.title {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  height: 32px;
  font-size: 24px;
  // margin-top: 10px;
  // margin-left: 20px;
  padding-left: 12px;
}

.title::before {
  position: absolute;
  left: 0px;
  width: 5px;
  top: 4px;
  bottom: 4px;
  background-color: rgb(58, 100, 255);
  content: "";
  border-radius: 16px;
}
</style>